<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table,
        tr,
        th,
        td {
            border: 1px solid #ccc;
        }

        tr {
            height: 40px;
        }

        table {
            border-collapse: collapse;
            width: 630px;
            text-align: center;
            margin: 20px auto;
        }

        thead {
            background-color: yellowgreen;
        }

        fieldset {
            width: 600px;
            margin: 0 auto;
        }

        input {
            height: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 第一部分：输入信息 -->
        <fieldset>
            <legend>学生录入系统</legend>
            <p>
                <span>姓名：</span>
                <input type="text" name="username" class="username">
            </p>
            <p>
                <span>年龄：</span>
                <input type="text" name="age" class="age">
            </p>
            <p>
                <span>性别：</span>
                <select name="sex" id="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </p>
            <p>
                <span>手机：</span>
                <input type="text" name="phone" class="phone">
            </p>
            <p>
                <button id="but">确认提交</button>
            </p>

        </fieldset>
        <!-- 第二部分：信息展示 -->
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>手机</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody class="tbody">
                <!-- <tr>
                    <td>张三</td>
                    <td>18</td>
                    <td>男</td>
                    <td>15511111111</td>
                    <td>删除</td>
                </tr> -->
            </tbody>
        </table>
    </div>
    <script>
        // 逻辑：1.添加信息并展示  2.删除操作
        // 先把数据push到一个数组当中，然后对数组进行遍历（对tr的循环，拼接之后，赋值给tbody的innerHTML） 
        let sex = document.getElementById('sex');
        let but = document.getElementById('but');
        let input = document.getElementsByTagName('input');
        let tbody = document.getElementsByTagName('tbody')[0];
        // 模拟一个数据
        // let stus = [{name:"李四",age:19,sex:"男",phone:15512344321}];
        let stus = [];
        // 1.提交 拼接一个对象，作为数组的元素
        but.onclick = function () {
            let obj = { name: input[0].value, age: input[1].value, sex: sex.value, phone: input[2].value };
            stus.push(obj);
            console.log(stus);
            // 2.对数组进行遍历
            let tr = '';
            stus.forEach((item, index) => {
                tr += "<tr class='newTr'>" +
                    "<td>"+item.name+"</td>" +
                    "<td>"+item.age+"</td>" +
                    "<td>"+item.sex+"</td>" +
                    "<td>"+item.phone+"</td>" +
                    "<td onclick='del("+index+")'>删除</td>" +
                    "</tr>";
            });
            tbody.innerHTML = tr;
        }
        // 3.删除操作
        function del(index){
            // 3.1 删除数组中的这条信息
            stus.splice(index,1);
            // 3.2 删除DOM元素
            // tbody.removeChild(该条信息的tr);
            let res = document.getElementsByClassName('newTr')[index];
            tbody.removeChild(res);
        }

    </script>
</body>

</html>